<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="b1" onclick="s1()">1</button>
    <button id="b2" onclick="s2()">2</button>
    <button id="b3" onclick="s3()">3</button>
    <button id="b4" onclick="s4()">4</button>
    <button id="b5" onclick="s5()">5</button>
    <button id="b6" onclick="pre()">上一张</button>
    <button id="b7" onclick="next()">下一张</button>
<hr>

<img id="pic" width="400" src="x1.jpg" alt="">

</body>

<script>
    var i=1;
    function s1(){
        pic.src="x1.jpg.";
        i=1;
    }
    function s2(){
        pic.src="x2.jpg.";
        i=2;
    }
    function s3(){
        pic.src="x3.jpg.";
        i=3;
    }
    function s4(){
        pic.src="x4.jpg.";
        i=4;
    }
    function s5(){
        pic.src="x5.jpg.";
        i=5;
    }
    function pre(){
        i--;
      if(i==0)i=5
      {
          pic.src="x"+i+".jpg";
      }
    }
    function next(){
        i++;
      if(i==6)i=1
      {
          pic.src="x"+i+".jpg";
      }
    }
</script>
</html>